<!-- components/Carousel3D.vue -->
<template>
  <view class="carousel-container">
    <view
      v-for="(slide, index) in slides"
      :key="index"
      :class="['slide', getSlideClass(index)]"
    >
      <image :src="slide.img" mode="aspectFill" class="slide-image" />
    </view>

    <!-- 控制按钮 -->
    <view class="controls">
      <button class="control-btn" @click="prevSlide">←</button>
      <button class="control-btn" @click="nextSlide">→</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 轮播图数据
const slides = ref([
  { id: 1, img: 'https://picsum.photos/id/1018/800/400' },
  { id: 2, img: 'https://picsum.photos/id/1015/800/400' },
  { id: 3, img: 'https://picsum.photos/id/1019/800/400' },
  { id: 4, img: 'https://picsum.photos/id/1016/800/400' },
  { id: 5, img: 'https://picsum.photos/id/1011/800/400' }
])

const currentIndex = ref(0)

// 计算每个 slide 应该应用的类名
const getSlideClass = (index) => {
  const diff = (index - currentIndex.value + slides.value.length) % slides.value.length

  if (diff === 0) return 'active'
  if (diff === 1) return 'next'
  if (diff === 2) return 'far-next'
  if (diff === slides.value.length - 1) return 'prev'
  if (diff === slides.value.length - 2) return 'far-prev'
  return ''
}

// 下一张
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.value.length
}

// 上一张
const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length
}

// 自动轮播
let interval
onMounted(() => {
  interval = setInterval(nextSlide, 3000)
})

// 组件销毁时清除定时器
// 注意：在 UniApp 中，可配合 onUnmounted
import { onUnmounted } from 'vue'
onUnmounted(() => {
  if (interval) clearInterval(interval)
})
</script>

<style scoped>
/* 注意：nvue 不支持某些 CSS 属性，此处为普通 vue3 编译到 H5/小程序 */
.carousel-container {
  position: relative;
  width: 80%;
  height: 300rpx;
  margin: 60rpx auto;
  /* 模拟 3D perspective，但 nvue 不支持 preserve-3d */
  transform-style: preserve-3d; /* H5 支持，App-nvue 不支持 */
}

.slide {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 20%;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 25rpx 50rpx rgba(0, 0, 0, 0.3);
  transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.slide-image {
  width: 100%;
  height: 100%;
}

/* 层级状态 */
.slide.active {
  transform: translateZ(0) scale(1);
  z-index: 10;
  opacity: 1;
  box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.4);
}

.slide.prev {
  transform: translateX(-30%) translateZ(-100px) scale(0.85);
  opacity: 0.7;
  z-index: 1;
  filter: brightness(0.8);
}

.slide.next {
  transform: translateX(30%) translateZ(-100px) scale(0.85);
  opacity: 0.7;
  z-index: 1;
  filter: brightness(0.8);
}

.slide.far-prev {
  transform: translateX(-60%) translateZ(-200px) scale(0.7);
  opacity: 0.4;
  z-index: 0;
  filter: brightness(0.6);
}

.slide.far-next {
  transform: translateX(60%) translateZ(-200px) scale(0.7);
  opacity: 0.4;
  z-index: 0;
  filter: brightness(0.6);
}

/* 控制按钮 */
.controls {
  position: absolute;
  bottom: -60rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20rpx;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}
</style>